<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.4.1.js"></script>
</head>
<style>
    div{
        background-color: red;
        width: 100px;
        height: 100px;
    }
</style>
<body>
    <div></div>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <button>上滑</button>
    <button>下滑</button>
    <button>切换</button>
    <button>停止</button>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>变淡</button>
    <button>变浓</button>
    <script>
        //hover
        $('div').hover(function(){
            alert('进来了');
        },function(){
            alert('出来了');
        })
        //显示隐藏
        $('button').eq(0).click(function(){
            $('div').show(2000,function(){
                alert('出来了');
            });
        })
        $('button').eq(1).click(function(){
            $('div').hide(2000,function(){
                alert('没了')
            });
        })
        $('button').eq(2).click(function(){
            $('div').toggle(2000);
        })
        //滑动
        $('button').eq(3).click(function(){
            $('div').slideUp(2000);
        })
        $('button').eq(4).click(function(){
            $('div').slideDown(2000);
        })
        $('button').eq(5).click(function(){
            $('div').slideToggle(2000);
        })
        $('button').eq(6).click(function(){
            $('div').stop();
        })
        $('button').eq(7).click(function(){
            $('div').fadeIn(2000);
        })
        $('button').eq(8).click(function(){
            $('div').fadeOut(2000);
        })
        $('button').eq(9).click(function(){
            $('div').fadeToggle(2000);
        })
        $('button').eq(10).click(function(){
            $('div').fadeTo(1000,0.1);
        })
        $('button').eq(10).click(function(){
            $('div').fadeTo(1000,1);
        })
    </script>
</body>
</html>